<template>
  <div class="mine">
    <div class="title">饿了吗</div>
    <div class="user">
      <span class="userPic"></span>
      <span class="userId">用户:16697124325</span>
    </div>
    <div class="myTools">
      <div class="name">常用工具</div>
      <div class="tools">
        <div class="tool">
           <div @click="$router.push('/address')" class="ico"><van-icon name="location-o"  size="35px"/></div>
           <div @click="$router.push('/address')">我的地址</div>
        </div>
        <div class="tool">
           <div class="ico"><van-icon name="service-o" size="35px" /></div>
           <div>我的客服</div>
        </div>
        <div class="tool">
           <div class="ico"><van-icon name="like-o" size="35px"/></div>
           <div>店铺关注</div>
        </div>
        <div class="tool">
           <div class="ico"><van-icon name="star-o"  size="35px" /></div>
           <div>评价有礼</div>
        </div>
        

      </div>
      <!-- <van-icon name="location-o" /> -->
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.mine{
  height: 300px;
  background-color: lightpink;
  overflow: hidden;
}

.mine .title {
  margin: 20px 10px;
  font-size: 20px;
  font-weight: bolder;
}

.mine .user {
  /* margin-bottom: 20px; */
  width: 100%;
  height: 60px;
  margin: 20px 10px 50px 10px;
}
.user span:nth-child(1) {
  display: inline-block;
  width: 60px;
  height: 100%;
  border-radius: 100%;
  background-color: red;
  text-align: center;
  line-height: 60px;
  margin-right: 20px;
  background: url("../../../public/藏羚羊.webp") no-repeat;
  background-size: 60px 60px;
}
.user span:nth-child(2) {
  display: inline-block;
  width: 60%;
  /* height: 60%; */
  /* line-height: 30px; */
  background-color: lightcoral;


}
.myTools .name {
  font-weight: bolder;
  font-size: 18px;
  margin-bottom: 20px;
}


.myTools .tools {
  display: flex;
  justify-content: space-around;
}
.tools .tool .ico {
  text-align: center;
  margin-bottom: 15px;
}
</style>